<template>
    <div class="banner">
        <img :src="`../../public/img/${bannerData}`" alt="banner">
        <div class="search-container">
            <input type="text" placeholder="请输入您要搜索的课程" v-model="searchQuery">
            <img src="../../public/img/ss.png" alt="searchButton" class="search-icon" @click="searchCourse">
            <button class="favo-button" @click="addToFavorite"></button>
        </div>
    </div>
    <div class="nav">
        <div class="nav-list" v-for="item, index in navData" :key="index">
            <img v-if="item.img" :src="`../../public/img/${item.img}`" alt="img" class="img">
            <p>{{ item.name }}</p>
        </div>
    </div>
    <div class="recommend">
        <div class="container">
            <div class="explain">
                <img v-if="recommendData.value" :src="`../../public/img/${recommendData.value.icon}`" alt="">
                <p>最新推荐</p>
            </div>
            <div class="go">
                <img src="../../public/img/go.png" alt="go">
            </div>
        </div>
        <div class="recommend-list" v-if="recommendData.value" v-for="item, index in recommendData.value.list">
            <div class="recommend-item">
                <img :src="`../../public/img/${item.img}`" alt="img">
                <h4>{{ item.name }}</h4>
                <div class="details">
                    <p class="price">￥{{ item.price }}</p>
                    <p class="number">{{ item.number }}人购买</p>
                </div>
            </div>
        </div>
    </div>
    <div class="courses">
        <div class="container">
            <div class="explain">
                <img v-if="myCoursesData.value" :src="`../../public/img/${myCoursesData.value.icon}`" alt="">
                <p>我的课程</p>
            </div>
            <div class="go">
                <img src="../../public/img/go.png" alt="go">
            </div>
        </div>
        <div class="courses-list" v-if="myCoursesData.value" v-for="item, index in myCoursesData.value.list"
            :key="index">
            <div class="courses-item">
                <img :src="`../../public/img/${item.img}`" alt="img">
                <h4>{{ item.name }}</h4>
                <div class="details">
                    <p class="price">￥{{ item.price }}</p>
                    <p class="number">{{ item.number }}人购买</p>
                </div>
            </div>
        </div>
    </div>
    <div class="preferred">
        <div class="containner">
            <div class="explain">
                <img v-if="preferredData.value" :src="`../../public/img/${preferredData.value.icon}`" alt="">
                <p style="font-size: 16px;font-weight: 400;">优选课程</p>
            </div>
            <div class="go">
                <img src="../../public/img/go.png" alt="go">
            </div>
        </div>
        <div class="preferred-list" v-if="preferredData.value" v-for="item, index in preferredData.value.list"
            :key="index">
            <div class="preferred-item">
                <img :src="`../../public/img/${item.img}`" alt="">
                <div class="expalin">
                    <h4>{{ item.name }}</h4>
                    <p>{{ item.desc }}</p>
                    <div class="price">
                        <span>{{ parseFloat(item.price).toFixed(2) }}元</span>
                        <button>立即报名</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps,reactive,onMounted } from 'vue'
import axios from 'axios';

const searchQuery = ref('')
const bannerData = ref('')
const navData = ref([])
const recommendData = reactive({})
const myCoursesData = reactive({})
const preferredData = reactive({})

const searchCourse = () => {
    console.log('搜索课程：', searchQuery.value)
}
const addToFavorite = () => {
    console.log('收藏成功')
}
const props = defineProps({
    bannerData: {
        type: String,
        required: true
    },
    navData:{
        type:Array,
        required:true
    },
    recommendData: {
        type: Object,
        required: true
    },
    myCoursesData: {
        type: Object,
        required: true
    },
    preferredData: {
        type: Object,
        required: true
    }
})
onMounted(()=>{
    axios.get('../../public/data.json').then(response=>{
        bannerData.value = response.data.index.banner.img
        navData.value = response.data.index.nav
        recommendData.value = response.data.index.recommend
        myCoursesData.value = response.data.index["my-course"]
        preferredData.value = response.data.index["preferred-courses"]
    }).catch(error=>{
        console.log('请求失败:',error)
    })
})

</script>

<style>
.banner {
  position: relative;
  width: 100%;
  height: auto; 
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.search-container {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center; 
  padding: 0 20px;
}

input {
  flex: 0.9;
  padding: 5px 10px 5px 30px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

input:focus{
    outline: none;
}

.search-icon {
  position: absolute;
  left: 28px;
  width: 20px!important;
  height: 20px!important;
  cursor: pointer;
  padding-left: 10px;
}

.favo-button {
  position: absolute;
  right: 10px;
  width: 20px;
  height: 20px;
  background-image: url('../../public/img/sc.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.nav{
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.nav .nav-list{
  margin-top: 10px;
  padding: 0 5px;
}
.nav-list p{
  margin-top: 3px;
}
.recommend {
    background-color: #fff;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}

.recommend .container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recommend .container .explain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding-left: 20px;
}

.recommend .container .go {
    width: 23px;
    height: 23px;
}

.recommend .container .explain img {
    margin-right: 5px;
    width: 23px;
}

.recommend .recommend-list {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

.recommend-list .recommend-item{
    padding-left: 5px;
}
.recommend-item img {
    width: 100%;
    height: auto;
}
.recommend-item h4{
    margin-top: 5px;
    font-size: 14px;
    text-align: left;
    padding-left: 3px;
}
.recommend-item .details{
    position: relative;
    top: -26px;
    display: flex;
    justify-content: space-between;
}
.recommend-item .details .price{
    color: #f34b05;
    padding-left: 5px;
}
.recommend-item .details .number{
    color: #bbbbbb;
    padding-right: 5px; 
}
.courses {
    background-color: #fff;
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
}

.courses .container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.courses .container .explain {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding-left: 20px;
}

.courses .container .go {
    width: 23px;
    height: 23px;
}

.courses .container .explain img {
    margin-right: 5px;
    width: 23px;
}

.courses .courses-list {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

.courses-list .courses-item{
    padding-left: 5px;
}
.courses-item img {
    width: 100%;
    height: auto;
}
.courses-item h4{
    margin-top: 5px;
    font-size: 14px;
    text-align: left;
    padding-left: 3px;
}
.courses-item .details{
    position: relative;
    top: -26px;
    display: flex;
    justify-content: space-between;
}
.courses-item .details .price{
    color: #f34b05;
    padding-left: 5px;
}
.courses-item .details .number{
    color: #bbbbbb;
    padding-right: 5px; 
}
</style>